<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fregments :: head(~{::title})">
    <title>影院品牌管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap-icons.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/lib/toastr/toastr.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/lib/bootstrapValidator/bootstrapValidator.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/lib/bootstrap-select/bootstrap-select.css">
</head>

<body class="app sidebar-mini">
<!-- Navbar-->
<header th:replace="_fregments :: header" class="app-header"><a class="app-header__logo" href="index.html">挚夕影院</a>
    <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar"
                                    aria-label="Hide Sidebar"></a>
    <!-- Navbar Right Menu-->
    <ul class="app-nav">
        <li class="app-search">
            <input class="app-search__input" type="search" placeholder="Search">
            <button class="app-search__button"><i class="bi bi-search"></i></button>
        </li>

        <!-- User Menu-->
        <li class="dropdown"><a class="app-nav__item" href="#" data-bs-toggle="dropdown" aria-label="Open Profile Menu"><i
                class="bi bi-person fs-4"></i></a>
            <ul class="dropdown-menu settings-menu dropdown-menu-right">
                <li><a class="dropdown-item" href="page-user.html"><i class="bi bi-gear me-2 fs-5"></i> 设置</a></li>
                <li><a class="dropdown-item" href="page-login.html"><i class="bi bi-box-arrow-right me-2 fs-5"></i> 登出</a>
                </li>
            </ul>
        </li>
    </ul>
</header>
<!-- Sidebar menu-->
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside th:replace="_fregments :: menu(1, 3)" class="app-sidebar">
    <div class="app-sidebar__user"><img class="app-sidebar__user-avatar" src="../../static/images/me.jpg"
                                        alt="User Image">
        <div>
            <p class="app-sidebar__user-name">Dylan</p>
            <p class="app-sidebar__user-designation">Backend Developer</p>
        </div>
    </div>
    <ul class="app-menu">
        <!-- 仪表盘 -->
        <li>
            <a class="app-menu__item" href="../index.html">
                <i class="app-menu__icon bi bi-speedometer"></i>
                <span class="app-menu__label">仪表盘</span>
            </a>
        </li>
        <!-- 影院管理 -->
        <li class="treeview is-expanded">
            <a class="app-menu__item active" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-house"></i>
                <span class="app-menu__label">影院管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../cinema/cinema_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../cinema/cinema_area.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院区域管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item active" href="../cinema/cinema_brand.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院品牌管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 电影管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-camera-reels"></i>
                <span class="app-menu__label">电影管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../movie/movie_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_comment.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影评论管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_age.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影年代管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_area.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影区域管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_type.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影类别管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_runtime.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影播放时段管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 影厅管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-bank"></i>
                <span class="app-menu__label">影厅管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../hall/hall_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影厅信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../hall/hall_type.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影厅类别管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 场次管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-bell"></i>
                <span class="app-menu__label">场次管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../session/session_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        场次信息管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 演员管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-people"></i>
                <span class="app-menu__label">演员管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../actor/actor_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        演员信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../actor/actor_role.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        演员角色管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 用户管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-person"></i>
                <span class="app-menu__label">用户管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../user/user_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        用户信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../user/user_order.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        订单信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../user/user_role.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        用户角色管理
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</aside>
<main class="app-content">

    <!-- Modal 开始-->
    <div class="modal fade" id="cinemaModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">添加品牌</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="modalInputBrandName" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>品牌名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="modalInputBrandName">
                        </div>
                        <div class="col-sm-9">
                            <input type="hidden" class="form-control" id="modalBrandId">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" id="modalSaveBtn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div><!-- Modal 结束-->
    <div class="app-title">
        <div>
            <h1><i class="bi bi-speedometer"></i> 影院品牌管理</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="bi bi-house-door fs-6"></i></li>
            <li class="breadcrumb-item"><a th:href="@{/cinema/info}">影院管理</a></li>
            <li class="breadcrumb-item">影院品牌管理</li>
        </ul>
    </div>
    <!-- 查询条件 -->
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-3">
            <input type="text" id="inputSearch"  class="form-control" placeholder="请输入品牌名称">
        </div>
        <div class="col-md-3">
            <button type="button" id="btnSearch" class="btn btn-success">搜索</button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                    data-bs-target="#cinemaModal" data-id="0">添加品牌
            </button>
            <button type="button" id="btnDeleteBatch" class="btn btn-danger">批量删除</button>
        </div>
    </div>


    <div class="row">
        <div id="table-container">
            <table th:fragment="brandList" class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">
                        <input class="form-check-input" type="checkbox" value="" id="checkAll">
                    </th>
                    <th scope="col">
                        品牌名称
                    </th>
                    <th scope="col">
                        操作
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="brand : ${cinemaBrands}">
                    <th scope="row">
                        <input class="form-check-input deleteCheck" value="1" th:value="${brand.id}" type="checkbox">
                    </th>
                    <td th:text="${brand.name}">万达影城</td>
                    <td>
                        <button type="button" class="btn btn-primary updateBtn" data-bs-toggle="modal"
                                data-bs-target="#cinemaModal" th:data-id="${brand.id}">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <button type="button" class="btn btn-danger deleteBtn" th:data-id="${brand.id}">
                            <i class="bi bi-trash"></i>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>
    <!--    <div class="row">-->
    <!--        <nav aria-label="Page navigation example">-->
    <!--            <ul class="pagination justify-content-center">-->
    <!--                <li class="page-item disabled">-->
    <!--                    <a class="page-link">上一页</a>-->
    <!--                </li>-->
    <!--                <li class="page-item active"><a class="page-link" href="#">1</a></li>-->
    <!--                <li class="page-item"><a class="page-link" href="#">2</a></li>-->
    <!--                <li class="page-item"><a class="page-link" href="#">3</a></li>-->
    <!--                <li class="page-item">-->
    <!--                    <a class="page-link" href="#">下一页</a>-->
    <!--                </li>-->
    <!--            </ul>-->
    <!--        </nav>-->
    <!--    </div>-->
</main>
<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../../static/js/jquery-3.7.0.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/main.js"></script>
<script src="../../static/lib/toastr/toastr.min.js"></script>
<script src="../../static/lib/bootstrap-select/bootstrap-select.min.js"></script>
<script src="../../static/lib/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="../../static/lib/sweetalert.min.js"></script>
<!--/*/</th:block>/*/-->


<script type="text/javascript">
    function clearModal() {
        $("#modalInputBrandName").val('');
        $("#modalBrandId").val('');
    }
    //加载数据
    function load() {
        $("#table-container").load(/*[[@{/cinema/brand/search}]]*/"/cinema/brand/search", {
            name: $.trim($("#inputSearch").val())
        });
    }
    $(function () {
        //配置弹窗
        toastr.options = {
            "closeButton": false, //是否显示关闭按钮

            "debug": false, //是否使用debug模式

            "positionClass": "toast-top-right",//弹出窗的位置

            "showDuration": "300",//显示的动画时间

            "hideDuration": "1000",//消失的动画时间

            "timeOut": "3000", //展现时间

            "extendedTimeOut": "1000",//加长展示时间

            "showEasing": "swing",//显示时的动画缓冲方式

            "hideEasing": "linear",//消失时的动画缓冲方式

            "showMethod": "fadeIn",//显示时的动画方式

            "hideMethod": "fadeOut" //消失时的动画方式
        }

        //模态窗口
        const cinemaModal = document.getElementById('cinemaModal')
        cinemaModal.addEventListener('show.bs.modal', event => {
            // Button that triggered the modal
            const button = event.relatedTarget
            // Extract info from data-bs-* attributes
            const id = button.getAttribute('data-id')
            // If necessary, you could initiate an AJAX request here
            // and then do the updating in a callback.
            //
            const modalTitle = cinemaModal.querySelector('.modal-title')
            if (id != '0') { //修改
                modalTitle.textContent = '修改品牌';
                //查品牌信息
                $.ajax({
                    url: '[[@{/cinema/brand/}]]' + id,
                    type: 'get',
                    success: function (response) {
                        //id
                        $("#modalBrandId").val(response.data.id);
                        //name
                        $("#modalInputBrandName").val(response.data.name);
                    }
                });
            } else {
                modalTitle.textContent = '添加品牌';
                //清空模态框
                clearModal();
            }
        });

        //保存
        $("#modalSaveBtn").click(function () {
            //收集参数
            var id = $("#modalBrandId").val();
            var name = $.trim($("#modalInputBrandName").val());
            $.ajax({
                type: id ? 'put' : 'post',
                url: '[[@{/cinema/brand}]]',
                data: {
                    id: id,
                    name: name
                },
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                        //关闭模态框
                        $("#cinemaModal").modal('hide');
                        //加载表格数据
                        load();
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    //请求失败
                    toastr.error(response.responseText, 'error');
                }
            })
        });
        //删除
        $("#table-container").on('click', '.deleteBtn', function (){
            //获取id
            var id = $(this).data("id");
            $.ajax({
                url: '[[@{/cinema/brand/}]]' + id,
                type: 'delete',
                success: function (response){
                    if(response.status == 'success'){
                        toastr.success(response.data, 'success');
                        // window.location.href = '[[@{/cinema/cinema_brand}]]'
                        //加载表格数据
                        load();
                    }else{
                        toastr.warning(response.data.errorMessage, 'fail')
                    }
                }
            })
        })

        //搜索
        $("#btnSearch").click(function (){
            load();
        });

        //全选
        $("#table-container").on('click', '#checkAll', function (){
            $(".deleteCheck").prop("checked",this.checked);
        });
        $("#table-container").on('click', '.deleteCheck', function (){
            $("#checkAll").prop("checked",
                $(".deleteCheck").length == $(".deleteCheck:checked").length);
        });
        //批量删除
        $("#btnDeleteBatch").click(function (){
            var brandIds = $(".deleteCheck:checked")
            if(brandIds.length == 0){
                swal('请勾选要删除的品牌')
                return
            }
            var ids = "" // 所有id拼接成的字符串变量
            // 遍历数组
            $.each(brandIds, function () { // id的格式为：id=xxx&id=xxx&id=xxx&id=xxx&id=xxx..
                // 这个this是checkbox选择框dom对象
                ids += "id=" + this.value + "&"; // 这个id是怎么获取到的：checkbox的value值，在查询数据时将id值赋给了checkbox
            })
            ids = ids.substring(0, ids.length - 1)
            swal("确认删除选中吗?", {
                buttons: ["取消", "确认"],
            }).then((value) => {
                // 点击取消 value=null
                // 点击确认 value=true
                if(value){
                    $.ajax({
                        url: '[[@{/cinema/brand}]]',
                        type: 'delete',
                        data: ids,
                        success: function (response){
                            if(response.status == 'success'){
                                //加载表格数据
                                load();
                                swal(response.data);
                            }else{
                                swal(response.data.errorMessage)
                            }
                        },
                        error: function (response){
                            swal(response.responseText);
                        }
                    })
                }
            });
        });
    });

</script>
</body>

</html>